<template>
  <div class="Index flex" v-cloak ref='Index'>
<!--     <div class="Index__Music">
        <music :items='musicinfo'></music>
    </div> -->
<!--     <lizi class='Index_lizi'></lizi> -->
    <xfd-message-box class='xfd-mescon' :opts = "opts" :isMask = "isMask" :isShow="isShow" @closeCallback="message">
  <!--    <div class='xfd-close' @click.stop="message">关闭</div>  -->
          <div class='xfd-close'>扫码加好友的作用啊啊</div> 
          <img :src="ContactMeSrc" />
    </xfd-message-box>
    <div class="Index__Ceninfo" ref = 'Index__Ceninfo'>
    	<div class="Index__Ceninfo--header">
    		<span class="line1">个人信息首页 持续开发中</span>
    		<span class="line2">Personal information on the home page of continuous development</span>
    	</div>
    	<div class="Index__Ceninfo--menu">
    		<ul>
    			<li class="mypro flex" :class='{active:index == menuAtv}' v-for="(item,index) in proList" >
    
    				<a :href="item.href" v-if="item.inRouter" @click="handleGoto(item.inRouter)">
    				   <span>{{ item.name }}</span>
    				</a>
    				<a :href="item.href" v-else>
    				   <span>{{ item.name }}</span>
    				</a>
    			</li>
    		</ul>
    	</div>
    	<div class="Index__Ceninfo--infos">
    		<span class="desc">Let's start with the basic information</span>
    		<div class="infos">
    			<div class="infos__scul flex">
    				<div class="infos__scul--center">
    					 <pan-thumb class="photo" width='1.963rem' height='1.963rem' inPadding='0' :image='myPicTureMark'>
					         <img :src="myPicTure" />
					     </pan-thumb>
    					 <span class='mypicture'>my pic ture</span>
    				</div>
    			</div>
    			<div class="infos__noscul">
                    <div class="infos__noscul--item">
	    				<span class='asl'>Fake Name:</span>
	    				<span class='reply'>Lzo勋</span>
	    			</div>
	    			<div class="infos__noscul--item">
	    				<span class='asl'>Real Name:</span>
	    				<span class='reply'>仲勋</span>
	    			</div>
	    			<div class="infos__noscul--item">
	    				<span class='asl'> job Offer:</span>
	    				<span class='reply'>菜鸟程序员</span>
	    			</div>
    			</div>
    		</div>
    		<div class="infos__noscul--item long">
				<span class='asl'>Email:</span>
				<span class='reply'>869664233@qq.com</span>
			</div>
    	</div>
    	<div class="Index__Ceninfo--next flex">
    		<ul class="ContactMe">
    			<li class="ContactMe__item" v-for = "(item,index) in ContactMeCL">
    			    <a :href="item.href" class="flex-x" @click = "message(0,item.src)">
                        <i :class="item.className"></i>
                    </a>
                </li>
    		</ul>
    		<a :href="uisHref" class="goHomePage flex" v-waves>UI组件库</a>
    	</div>
    </div>
  </div>
</template>

<script>
console.log(process.env.NODE_ENV);
console.log(process.env.NODE_ENV);
import Tool from '../util/Tool'
// document.oncontextmenu=new Function("event.returnValue=false"); 
document.onselectstart=new Function("event.returnValue=false"); 
export default {
    name: 'Index',
    data () {
        return {
           index_bg_image: '/static/images/wizard.jpg',
           gif_image:'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
           proList:[
           	  {'name':'关于','inRouter':false,'href':'javascript:;'},
           	  {'name':'简历','inRouter':'/Resume','href':'javascript:;'},
           	  {'name':'博客','inRouter':false,'href':'https://liaozhongxun.github.io'},
           	  {'name':'更多','inRouter':'/Morepage','href':'javascript:;'},
           ],
           menuAtv:0,
           myPicTure:'/static/images/zhenzhao.png',
           myPicTureMark:'/static/images/wizard.jpg',
           ContactMeSrc:'',//二维码路径
           ContactMeCL:[ //联系我图标类列表
             {
             	'href':'https://github.com/liaozhongxun',
             	'className':'icon iconfont icon-github',
             },
             {
             	'href':'javascript:;',
             	'className':'icon iconfont icon-weixingongzhonghao',
             	'src':'/static/images/wxgzhcode.jpg'
             },
             {
             	 'href':'javascript:;',
	             'className':'icon iconfont icon-QQ',
	             'src':'/static/images/qqcode.jpg'
	         },
             {
             	 'href':'javascript:;',
	             'className':'icon iconfont icon-weixin',
	             'src':'/static/images/wxcode.jpg'
	         }
           ],
           /*=========弹出框组件*/
           isShow: false,
           isMask:true,
           opts: false,
           /*=========弹出框组件 end*/ 
           uisHref:'http://www.lzoxun.top/xfd-uis/',
           musicinfo:[
               {src:'/static/emdia/ccyb.mp3',type:'audio/mpeg'}
           ]
        }
    },
    methods:{
    	init(){
    		var _this = this;
            if(Tool.IsPC()){
            	this.uisHref = 'http://www.lzoxun.top/pc-uis/'
            }
    	},
  	    handleGoto(type) {
            this.$router.push({
                path: type
            });
        },
        //查看图片
        message(type,src) {
        	if(src||this.isShow){
	            this.isShow = this.isShow ? false : true;
        		this.ContactMeSrc = src;
	            
	            if(type === 0){
	                this.isMask = true;
	                this.opts = false;
	            }
	            if(type === 1){
	                this.isMask = false;
	                this.opts = false;
	            }
	      
	            if(type === 2){
	                this.isMask = true;
	                this.opts = [{
	                    txt: '确定',
	                    color: true,
	                    callback: () => {
	                        console.log('您点击了确定')
	                    }
	                }];
	            }
	        }
	    },
    },
    created(){
    	this.init();
    },
    mounted(){

        console.log($(this.$refs.Index).height())
    	console.log($(this.$refs.Index__Ceninfo).height())
	 	if($(this.$refs.Index).height() < $(this.$refs.Index__Ceninfo).height()){
             $(this.$refs.Index).height($(this.$refs.Index__Ceninfo).height() + 60)
        }
        // require('/static/js/canvas.lizi');
   //         var inh = $(this.$refs.Index).height();
   //      var inh_c = $(this.$refs.Index).height();
	 	// if(inh < inh_c){
   //           $(this.$refs.Index).height(inh_c + 60)
   //      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
	.Index{
		width: 100%;
		height: 100%;
		background: url(/static/images/wizard.jpg) no-repeat center/cover;
		perspective: 600px;
		position: relative;
	}
	.Index_lizi{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.Index__Ceninfo{
	    background: #fff;
        animation:Ind-rotate 2.5s;
		overflow: hidden;
		transition: all .5s;
	}
	.Index__Ceninfo--header{
		padding:0.444rem 0.185rem 0.185rem;
		font-family: '宋体';
		font-size: 0.519rem;

		transform:translateX(-100%);
		animation:Ind-toR .5s 0.5s;
		animation-fill-mode:forwards;
		span{
			display: block;
			text-align: center;
			color:#666;
			&.line1{
				font-weight: bold;
				letter-spacing: 3px;
			}
			&.line2{
				font-size: 65%; //父级有设置字体大小的百分百
				letter-spacing:0px;
				color:#999;
				line-height:1.5; //此数字会与当前的字体尺寸相乘来设置行间距

			}
		}
	}
	.Index__Ceninfo--menu{
        width: 100%;
        height: 37px;
        transform:translateX(100%);
		animation:Ind-toL .5s 1s;
		animation-fill-mode:forwards;
        ul{
        	background: #999;
        	width: 100%;
        	display: flex;
        	height: 100%;
        	.mypro{
        		transition:all .5s;
        		flex:1;
        		&.active{
        			background: #FF9500;
        		}
        		&:hover{
        			background: #666;
        		}
        	}
        	a{
                color:#fff;
                font-size: 0.333rem;
                span{
                	display: block;
                	&.english{
                		font-size: 14px;
                		text-align: center;
                	}
                }
        	}
        }
	}
	.Index__Ceninfo--infos{
	    width: 100%;
		transform:translateX(-100%);
		animation:Ind-toR .5s 1.5s;
		animation-fill-mode:forwards;
		.desc{
			padding: 0.263rem 0.556rem;
			line-height: 1.4;
			font-size: 0.407rem;
			text-align: center;
			width: 100%;
			letter-spacing: 0.019rem;
			display: block;
			color: #666;
		}
		.infos{
			width: 100%;
			padding: 0 0.833rem;
		}
		.infos__scul--center{
			width: 1.963rem;
			height: 2.778rem;
			.photo{
				transition:border .5s;
				width: 1.963rem;
				height: 1.963rem;
				border-radius: 50%;
				overflow: hidden;
				border:0.074rem solid #ccc;
				&:hover{
					border-color:#FF9500;
				}
                img{
                	width: 100%;
                	height: 100%;
                	display: block;
                }
			}
			.mypicture{
				text-align: center;
				display: block;
				width: 100%;
				font-weight: both;
				font-size:0.37rem;
				padding-top: 0.093rem;
				color: #666;
			}
		}
		.infos__noscul{
			width: 100%;
		}
		.infos__noscul--item{
			width: 100%;
			.asl{
			    padding-left: 0.185rem;
				display: block;
				font-size: 0.37rem;
				color:#999;
			}
			.reply{
			    padding-left: 0.185rem;
				display: block;
				font-size: 0.407rem;
				color:#666;
			}
			&:not(.long){
				margin-bottom: 0.185rem;
				border-bottom: 1px dashed #ccc;
			}
			&.long{
				padding:0 0.833rem;
			}
		}
	}
	.Index__Ceninfo--next{
		display:flex;
		width: 100%;
		padding: 0.37rem 0.833rem 0.556rem;

		transform:translateX(100%);
		animation:Ind-toL .5s 2s;
		animation-fill-mode:forwards;
		.ContactMe{
			height: 0.685rem;
			flex:1;
			display: flex;
		}
		.ContactMe__item{
			float: left;
			flex:1;
			a{
				width: 100%;
				height: 0.685rem;
				position: relative;
				padding-top: 0.093rem;
				color: #333;
			}
			i{
				font-size:0.648rem;
				&.icon-weixin,&.icon-weixingongzhonghao{
					color:#3CAF36;
				}
				&.icon-QQ{
					color:#16BCFA;
				}
			}
		}
		.goHomePage{
			width: 2.593rem;
			height: 0.685rem;
			border-radius: 0.056rem;	
			background: #FF9500;
			color:#fff;
			font-size: 0.296rem;
		}	
	}
</style>